<template>
  <div>
    <!-- 表格 -->

    <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        v-loading="loading"
        stripe
        max-height="520">
      <el-table-column
          fixed
          prop="orderNo"
          label="订单号"
          align="center"
          width="115">
      </el-table-column>
      <el-table-column
          prop="state"
          label="订单状态"
          align="center"
          :formatter="stateFormat"
          width="80">
        <template #default="{ row }">
          <span
              :style="{ color: row.state === 'S6' ? 'red' : row.state === 'S8' ? 'blue' : row.state === 'S2' ? 'orange' : row.state === 'S9' ? 'green' : 'black' }">{{
              row.state === 'S6' ? '已作废' : row.state === 'S8' ? '执行中' : row.state === 'S2' ? '待承接' : row.state === 'S9' ? '已完成' : 'black'
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="customerName"
          label="客户"
          align="center"
          width="240">
        <template #default="{ row }">
          <el-tag type="success">
            {{ row.customerName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="departureStationName"
          label="始发站"
          align="center"
          width="110">
      </el-table-column>
      <el-table-column
          prop="destinationStationName"
          label="目的站"
          align="center"
          width="110">
      </el-table-column>
      <el-table-column
          prop="portStationName"
          label="过境港口"
          align="center"
          width="110">
      </el-table-column>
      <el-table-column
          prop="containerNum"
          label="箱量"
          align="center"
          width="100">
        <template #default="{ row }">
          <el-tag type="info">{{ row.containerNum }} * {{ row.containerType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="customerServiceName"
          label="客服"
          align="center"
          width="100">
      </el-table-column>
      <el-table-column
          prop="createTime"
          align="center"
          :formatter="formatTime"
          label="下单时间">
        <!--          width="120">-->
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="getState(scope.row)">查看状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top:15px;">
      <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.length">
      </el-pagination>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
      <el-steps :active=this.activeNum>
        <el-step title="待承接" description="2023-12-12 12:03:21">sssss</el-step>
        <el-step title="执行中" description="2023-12-14 15:34:45"></el-step>
        <el-step title="已完成" description="2023-12-17 18:43:23"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      currentPage: 1, // 当前页码
      total: 1, // 总条数
      pageSize: 5, // 每页的数据条数
      dialogVisible: false,
      activeNum: 0
    };
  },
  //钩子函数
  mounted: function () {
    const loginUserInfo = JSON.parse(localStorage.getItem('userInfo'));
    const orgId = loginUserInfo.companyCode;
    const pageNum = 1;
    const pageSize = 100;
    axios({
      //请求方式
      method: 'post',
      //后端接口路径
      url: '/api/bs-order/orderListPage',
      //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
      params: {
        orgId: orgId,
        pageNum: pageNum,
        pageSize: pageSize
      }
    }).then((response) => {
      console.log(response)
      console.log(response.data.code)
      if (response.data.code === 200) {
        this.tableData = response.data.result.records
        this.total = response.data.result.totalRow
        console.log(this.tableData)
      } else {
        this.$message.error(response.data.message);
      }
    }).catch((error) => {
      this.$message.error("接口请求失败!");
    })
  },
  methods: {
    function() {
      const loginUserInfo = JSON.parse(localStorage.getItem('userInfo'));
      const orgId = loginUserInfo.companyCode;
      const pageNum = 1;
      const pageSize = 100;
      axios({
        //请求方式
        method: 'post',
        //后端接口路径
        url: '/api/bs-order/orderListPage',
        //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
        params: {
          orgId: orgId,
          pageNum: pageNum,
          pageSize: pageSize
        }
      }).then((response) => {
        console.log(response)
        console.log(response.data.code)
        if (response.data.code === 200) {
          this.tableData = response.data.result.records
          this.total = response.data.result.totalRow
          console.log(this.tableData)
        } else {
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        this.$message.error("接口请求失败!");
      })
    },
    getState(val){
      this.dialogVisible = true
      this.activeNum = val.state === 'S6' ? -1 : val.state === 'S8' ? 1 : val.state === 'S2' ? 0 : val.state === 'S9' ? 2 : 0
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    agreeClick(val) {
      this.$confirm('此操作将承接该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //承接订单
        this.loading = true
        axios({
          //请求方式
          method: 'post',
          //后端接口路径
          url: '/api/bs-order/acceptOrder',
          //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
          params: {
            orderNo: val.orderNo
          }
        }).then((response) => {
          if (response.data.code === 200) {
            setTimeout(() => {
              this.loading = false;
              this.function()
            }, 10);
            this.$message({
              type: 'success',
              message: '已承接订单'
            });
          } else {
            this.$message.error(response.data.message);
          }
        }).catch((error) => {
          this.$message.error("接口请求失败!");
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消承接'
        });
      });
    },
    cancelClick(val) {
      this.$confirm('此操作将作废该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        axios({
          //请求方式
          method: 'post',
          //后端接口路径
          url: '/api/bs-order/cancelOrder',
          //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
          params: {
            orderNo: val.orderNo
          }
        }).then((response) => {
          if (response.data.code === 200) {
            this.loading = true
            setTimeout(() => {
              this.loading = false;
              this.function()
            }, 10);
            this.$message({
              type: 'success',
              message: '已取消订单'
            });
          } else {
            this.$message.error(response.data.message);
          }
        }).catch((error) => {
          this.$message.error("接口请求失败!");
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消作废'
        });
      });
    },
    //变灰条件
    agreeState(val) {
      return val.state !== 'S2'
    },
    cancelState(val) {
      return val.state === 'S6'
    },
    //格式化时间
    formatTime(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    //状态格式转换
    stateFormat(row, column) {
      let data = row[column.property];
      console.log(data)
      if (data === "S2") {
        return '待承接'
      } else {
        return '已取消'
      }
    }
  }
};
</script>
